<template>
  <div
    class="header"
    :style="{
      background: blogerInfoIsShow ? 'var(--BlockBgColor)' : '',
    }"
  >
    <div class="blogerInfo" v-if="blogerInfoIsShow">
      <img src="https://q2.qlogo.cn/headimg_dl?spec=100&dst_uin=2383155523" alt="" class="avatar" />
      <div class="name">{{ title }}</div>
    </div>
    <div class="utils">
      <component
        :is="store.state.theme == 'light' ? IMoon : ISun"
        size="22"
        color="var(--themeColor)"
        @click="changeTheme"
      />
      <i-setting size="22" color="var(--themeColor)" @click="settingIsShow = true" />
    </div>
    <n-drawer v-model:show="settingIsShow" :width="300">
      <n-drawer-content closable>
        <template #header>
          <div class="settingHeader">项目设置</div>
        </template>
        <template #default>
          <n-divider title-placement="center">主题色设置</n-divider>
          <n-color-picker
            :show-preview="true"
            placement="bottom"
            :swatches="color"
            :default-value="store.state.themeColor"
            @update:value="changeThemeColor"
          />
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ISun, IMoon, ISetting } from "@cop/Icons"
import { debounce } from "@/util/util"
import { useStore } from "vuex"
import bus from "@/eventBus"
import color from "@/config/color"
import { NDrawer, NDrawerContent, NDivider, NColorPicker } from "naive-ui"
const title = ref("")
const store = useStore()
const blogerInfoIsShow = ref<boolean>(false)
const settingIsShow = ref<boolean>(false)
let scrollTop
window.onscroll = debounce(() => {
  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  bus.state.scrollTop = scrollTop
  blogerInfoIsShow.value = scrollTop > 400
  // console.log(scrollTop)
}, 200)
bus.on("title", data => {
  // console.log("title=", data)
  title.value = data
})
const changeTheme = () => {
  if (store.state.theme == "light") {
    store.commit("setTheme", "dark")
  } else {
    store.commit("setTheme", "light")
  }
}
const changeThemeColor = (value: string) => {
  store.commit("setThemeColor", value)
}
</script>

<style lang="scss" scoped>
.header {
  z-index: 98;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--rootPcWith);
  height: 50px;
  display: flex;
  align-items: center;
  opacity: 0.9;
  color: var(--TextColor);
  transition: all 0.3s var(--n-bezier);

  .blogerInfo {
    flex: 7;
    max-height: 100%;
    display: flex;
    transition: all 0.3s var(--n-bezier);

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 15%;
      margin-right: 10px;
      margin-left: 10px;
    }
    .name {
      flex: 1;
      height: 30px;
      line-height: 30px;
      font-weight: bolder;
      font-size: 16px;
      transition: var(--basic-transition);
      color: var(--TextColor);
      @media screen and (max-width: 768px) {
        font-size: 14px !important;
      }
    }
  }
  .utils {
    flex: 3;
    max-height: 100%;
    text-align: right;
    i {
      margin-right: 20px;
      user-select: none;
    }
  }
}
</style>
